<template>
   <div>
      <GlobalCardBox title="回收站" :showDown="RECYCLEBINDOWN" :contontStyle="RecycleBinStyle">   
        <div slot="content">
           <!-- 头部 -->
            <div class="head flex">
                <button v-for="(item,index) in naviData"  :key="index" class="naviOne" 
                        :class="getNaviClass(item)" @click="changeNavi(item)"> {{item.label}} </button>
            </div>

            <!-- 内容 -->
            <div id="content" v-if="getRecycleBinDataNow?.length > 0">
                 <div v-for="item in getRecycleBinDataNow" :key="item.id" class="contentOne" >
                     <div class="detail flex">
                        <img  :src="item.createdCover" >
                        <div class="overflow title">{{item.title}}</div>
                     </div>
                     <div class="info flex"> 
                          <button class="appeal" @click="openAppeal(item)">申请恢复</button>
                     </div>
                 </div>
            </div>

       
            <el-empty v-else id="content"></el-empty>
         
        </div>
      </GlobalCardBox>
   </div>
</template>
<script>
import GlobalCardBox from '@/components/Package/GlobalCardBox/GlobalCardBox.vue'
import { mapMutations, mapState } from 'vuex'
import request from '@/axios'
  export default 
  {
    components: { GlobalCardBox },
     name :'', 
     data() {
        return {
            RecycleBinStyle:{
               height:'700px',
            },
            RecycleBinData:[],
            naviState:1,
            naviData:[
                {value:1,label:'管理删除'},
                {value:2,label:'自己删除'}
            ]
        }
     },
     computed:{
        ...mapState('Login',['User']),
        getRecycleBinDataNow(){
            if(this.naviState == 1)
             return this.RecycleBinData.filter(item => item?.articleState == 2)
             return  this.RecycleBinData.filter(item => item?.deleted == 1)
        }
     },
     created() {
        this.init()
     },
     methods: {
        ...mapMutations('Personal',['RECYCLEBINDOWN']),
        ...mapMutations('Report',['SETAPPEAL']),
        getNaviClass(navi){
            if(navi?.value == this.naviState)
            return 'active'
        },
         changeNavi(navi){
            this.naviState  = navi?.value || 1
         },
         openAppeal(article){
            let title = '申述恢复文章 ' + article?.title
            let appealInfo =  this.naviState == 1 ? '解除文章限制' : '恢复文章'
            let appeal = {
                createdUid:this.User?.uid || 0 ,
                appealType:this.naviState || 1 ,
                articleId:article?.id || 0 ,
                username:this.User?.username,
                title:article?.title,
                appealInfo

            }
             this.SETAPPEAL({title,state:true,appeal})
             this.RECYCLEBINDOWN()
         },
        async init(){
             let res = {}
             let uid = this.User?.uid || 0
             try{
                 let  response = await request.get('/api/article/getAbnormalArticle',{params:{uid}})
         
                 if(response.data.code == 200) this.RecycleBinData = response.data?.data || []
                 res =  response.data
             }catch(error){res = {code : 400 , message:error}}

             if(res.code != 200)
             this.$message.error(res.message)
        }
     },
  }
</script>
<style scoped lang='less'>
.head{
    width: 100%;
    background: none;
    justify-content: space-around;

    .naviOne{
        padding: 5px;
        border-radius: 5px;
        margin: 5px;
        font-size: 18px;
    }

    .naviOne:hover,.active{
        background: var(--GeneralBackColor);
        color: white;
    }
}

#content{
    width: 100%;
    height: 550px;
    max-height: calc( 90vh - 150px);
    overflow: auto;
   

    .contentOne{
        width: calc(50% - 20px);
        min-width: 300px;
        background: var(--BackColor);
        border-radius: 5px;
         padding: 10px;
        box-sizing: border-box;
        margin: 10px;
        display: inline-block;
    }

    .detail{
        width: 100%;
        flex-wrap: nowrap;
        justify-content: flex-start;

        img{
            width: 100px;
            height: 100px;
            border: 1px solid #efefef;
        }
        .info{
            width: 100%;
        }

        .title{
            width: 80%;
            margin-left: 5px;
            color: var(--fontColor);
        }
    }
}
.appeal{
    font-size: 15px;
    background: var(--GeneralBackColor);
    background: orangered;
    padding: 5px;
    border-radius: 5px;
    margin: 5px;
    color: white;
}
</style>